<template>
  <div id="app">
    <div class="img">
      <img src="/static/images/personalCenter/waitPay.png" alt />
    </div>
    <!-- 标题 -->
    <div class="order_title">
      <i class="iconfont iconjinhangzhong order_icon"></i>
      <span v-if="order.orderStatus === 'TRADE' && order.payStatus === 'UN_PAY'">待支付</span>
      <span
        v-if="order.orderStatus === 'TRADE' && order.payStatus === 'SUCCESS' &&  order.logisticsStatus ==='UN_SEND'"
      >待发货</span>
      <span
        v-if="order.orderStatus === 'TRADE' && order.payStatus === 'SUCCESS' &&  order.logisticsStatus ==='SEND'"
      >待收货</span>
      <span v-if="order.orderStatus === 'SUCCESS'">已收货</span>
      <span v-if="order.orderStatus === 'FAIL'">已取消</span>
    </div>

    <!-- 订单定位 -->
    <div
      class="orderForm-localtion"
      style="background-color: #fff;height: 202rpx;padding:0 15px;"
      @click="handlePri"
    >
      <div
        class="title"
        style=" background: url('/static/images/store/order.png') no-repeat center bottom; background-size: 100% 4px;background-color: #fff;"
      >
        <div class="address-icon-box">
          <div class="address-icon"></div>
        </div>

        <div class="address-top">
          <div class="name-phone">
            <span>{{order.shippingName}}</span>
            <span>{{order.shippingMobile}}</span>
          </div>
          <div
            class="address-detail"
          >{{order.shippingProvince+' '+order.shippingCity+' '+order.shippingDistrict+' '+order.shippingAddress}}</div>
          <!-- <img class="" src="/static/images/store/order.png" alt /> -->
        </div>
      </div>
    </div>

    <!-- 订单详情内容 -->
    <div class="detail-content">
      <ul>
        <li class="oneOrder" v-for="(item, index) of order.items" :key="index">
          <div class="cont-left">
            <img :src="item.goodsImg" class="product-image" />
          </div>
          <div class="cont-right flex">
            <p class="goodsName line_ellipsis">{{item.goodsName}}</p>
            <p style="color:#868991;font-size: 12px">{{item.goodsSkuName}}</p>
            <div class="integral flex" style="justify-content:space-between;font-size:14px">
              <span style="color:#F45247">{{item.salePrice}}积分</span>
              <span style="color:#86899">× {{item.saleQuantity}}</span>
            </div>
          </div>
        </li>
      </ul>
      <!-- 备注 -->
      <div class="order_beizhu" v-for="(item, index) of order.items" :key="index">
        <div class="orderForm-num flex flex-pack-justify">
          <span style="color:#6B6B6B; font-size:13px;">商品总价</span>
          <div class="order_btns">{{item.saleQuantity * item.salePrice}}积分</div>
        </div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="order_info">
      <div
        @click="orderLogistics"
        class="flex align-center send"
        v-if="order.logisticsStatus ==='SEND'"
      >
        <p>{{order.shippingVendor}}</p>
        <p class="flex-1 flex align-center" style="text-align:right;justify-content: flex-end">
          <span>{{order.shippingNo}}</span>
          <img src="/static/images/icon_right.png" alt />
        </p>
      </div>
      <div class="order_num flex flex-pack-justify align-center">
        <span>订单编号</span>
        <div class="flex align-center">
          <span>{{order.orderNo}}</span>
          <span @click.stop="copy" class="number">复制</span>
        </div>
      </div>
      <div
        class="order_num flex flex-pack-justify"
        v-if="order.userComments"
        style="align-items: start;"
      >
        <span>备注</span>
        <div
          class="flex-1 align-center"
          style="padding-left:22px;"
          :style="{textAlign:order.userComments.length>20?'left':'right'}"
        >
          <span>{{order.userComments}}</span>
        </div>
      </div>
      <div class="order_num flex flex-pack-justify align-center">
        <span>下单时间</span>
        <div>
          <span>{{ gmtCreate}}</span>
        </div>
      </div>
      <div
        v-if=" order.payStatus === 'SUCCESS'"
        class="order_num flex flex-pack-justify align-center"
      >
        <span>支付时间</span>
        <div>
          <span>{{payAt}}</span>
        </div>
      </div>
      <div
        v-if="order.orderStatus === 'SUCCESS' && order.payStatus === 'SUCCESS' &&  order.logisticsStatus ==='RECEIVED'"
        class="order_num flex flex-pack-justify align-center"
      >
        <span>发货时间</span>
        <div>
          <span>{{shippingAt}}</span>
        </div>
      </div>
      <div
        v-if="order.orderStatus === 'SUCCESS'"
        class="order_num flex flex-pack-justify align-center"
      >
        <span>收货时间</span>
        <div>
          <span>{{receiptAt}}</span>
        </div>
      </div>
      <div
        v-if="order.orderStatus === 'FAIL'"
        class="order_num flex flex-pack-justify align-center"
      >
        <span>取消时间</span>
        <div>
          <span>{{closedAt}}</span>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer flex align-center">
      <div
        class="footer_left"
        v-if="order.orderStatus === 'TRADE' && order.payStatus === 'UN_PAY'"
        @click="cancelOrderL(order.id)"
      >取消订单</div>
      <div
        class="footer_right"
        style="background:#327289;color:#fff"
        v-if="order.orderStatus === 'TRADE' && order.payStatus === 'UN_PAY'"
        @click="handlePay(order.id)"
      >立即支付</div>
      <div
        class="footer_right"
        v-if="order.orderStatus === 'TRADE' && order.payStatus === 'SUCCESS' &&  order.logisticsStatus ==='SEND'"
        @click="confirmReceiveClick(order.id)"
      >确认收货</div>
      <div
        class="footer_right"
        v-if="order.orderStatus === 'FAIL' || order.orderStatus === 'SUCCESS'"
        @click="cancel(order.id)"
      >删除订单</div>
    </div>
  </div>
</template>

<script>
import {
  orderDetail,
  cancelOrder,
  deleteOrder,
  confirmReceive,
  payNow
} from '@/api/api';
export default {
  props: {},
  data () {
    return {
      order: {},
      gmtCreate: '',
      payAt: '',
      shippingAt: '',
      receiptAt: '',
      closedAt: '',
      utils: '',
      value: '', // 备注内容
      currentAddress: {
        fullName: 'Marie',
        address: '',
        phone: '13600000000',
        def: true,
        province: '上海市宝山区 ',
        city: '长江路258号 ',
        area: '中成智谷中成智谷 B0栋2F美萌'
      }
    };
  },
  computed: {},
  created () {},
  mounted () {
    console.log(this.$root.$mp.query.id, '来到订单详情');
    // 将时间戳转换用户报名时间的方法
    let utils = require('@/utils/time.js');
    this.formatDate = utils.default.formatDate;

    this.orderDetail(this.$root.$mp.query.id);
  },
  onShow () {},
  watch: {},
  methods: {
    /** 查看物流 */
    orderLogistics () {
      wx.navigateTo({
        url:
          '/pages/PersonalCenter/userChildren/myOrder/lookLogistics/main?id=' +
          this.$root.$mp.query.id
      });
    },
    /** 复制 */
    copy () {
      wx.setClipboardData({
        data: this.order.orderNo
        // success: function (res) {
        //   wx.getClipboardData({
        //     success: function (res) {
        //       wx.showToast({
        //         title: '复制成功'
        //       });
        //     }
        //   });
        // }
      });
    },
    // 请求订单信息详情
    async orderDetail (id) {
      await orderDetail({ id }).then(res => {
        this.order = res;
        this.gmtCreate = res.gmtCreate ? this.formatDate(res.gmtCreate) : null;
        this.payAt = res.payAt ? this.formatDate(res.payAt) : null;
        this.shippingAt = res.shippingAt
          ? this.formatDate(res.shippingAt)
          : null;
        this.receiptAt = res.receiptAt ? this.formatDate(res.receiptAt) : null;
        this.closedAt = res.closedAt ? this.formatDate(res.closedAt) : null;
      });
    },
    // 取消订单
    cancelOrderL (id) {
      console.log(id, 'dddd');
      let _this = this;
      wx.showModal({
        title: '',
        content: '是否取消该订单？',
        cancelText: '否',
        confirmText: '是',
        success (res) {
          if (res.confirm) {
            _this.doCancelOrder(id);
          } else if (res.cancel) {
          }
        }
      });
    },
    async doCancelOrder (id) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      await cancelOrder({ id }).then(res => {
        wx.hideLoading();
        wx.navigateTo({
          url: '/pages/PersonalCenter/userChildren/myOrder/myOrder/main'
        });
      });
    },
    // 立即支付
    handlePay (id) {
      let that = this;
      wx.showModal({
        content: '商品一经销售概不退换，是否确认购买？',
        success: function (res) {
          if (res.confirm) {
            that.payNow(id);
          }
          if (res.cancel) {
          }
        }
      });
    },
    async payNow (id) {
      await payNow({ id }).then(res => {
        console.log('立即支付', res);
        wx.navigateTo({
          url: `/pages/store/children/paySuccess/main?id=${id}`
        });
      });
    },
    // 删除订单
    cancel (id) {
      let _this = this;
      wx.showModal({
        title: '',
        content: '是否删除该订单？',
        cancelText: '否',
        confirmText: '是',
        success (res) {
          if (res.confirm) {
            _this.deleteOrder(id);
          } else if (res.cancel) {
          }
        }
      });
    },
    async deleteOrder (id) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      await deleteOrder({ id }).then(res => {
        wx.hideLoading();
        wx.navigateTo({
          url: '/pages/PersonalCenter/userChildren/myOrder/myOrder/main'
        });
      });
    },
    // 确认收货
    confirmReceiveClick (id) {
      let _this = this;
      wx.showModal({
        title: '',
        content: '是否确认收货？',
        cancelText: '否',
        confirmText: '是',
        success (res) {
          if (res.confirm) {
            _this.confirmReceive(id);
          } else if (res.cancel) {
          }
        }
      });
    },
    async confirmReceive (id) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      await confirmReceive({ id }).then(res => {
        wx.hideLoading();
        wx.navigateTo({
          url: '/pages/PersonalCenter/userChildren/myOrder/myOrder/main'
        });
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
page {
  background-color: f7f7f8;
}
.send {
  font-size: 13px;
  color: #6b6b6b;
  padding: 15px 15px 10px 15px;
  border-bottom: 0.5px solid #e6e6e6;
  img {
    width: 10px;
    margin-left: 8px;
    height: 14px;
  }
}
#app {
  padding-bottom: 108rpx;
}

.img {
  position: relative;

  img {
    width: 100%;
    height: 123px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

// 标题
.order_title {
  height: 72px;
  width: 100%;
  padding-left: 15px;
  box-sizing: box;
  line-height: 72px;
  display: flex;
  position: relative;
  z-index: 99999999999;

  .order_icon {
    color: #fff;
    font-size: 18px;
    margin-right: 10px;
  }

  span {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
}

// 订单定位
.title {
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100px;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  border-radius: 2px;

  .address-top {
    flex: 1;
    display: flex;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-left: 15px;
    box-sizing: border-box;
    padding-right: 15px;

    .name-phone {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      font-family: PingFangSC;
      font-weight: 700;
      color: rgba(8, 16, 32, 1);
    }
    .address-detail {
      font-size: 14px;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(134, 137, 145, 1);
      margin-top: 5px;
    }
  }
}

// 订单详情内容
.detail-content {
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  border-radius: 2px;
  margin: 15px 15px 0;

  .oneOrder {
    width: 100%;
    .cont-left {
      width: 100px;
      height: 100px;
      background-color: #f7f7f8;
      float: left;
      margin-right: 15px;
      .product-image {
        width: 100px;
        height: 100px;
      }
    }
    .cont-right {
      height: 100px;
      flex-direction: column;
      justify-content: space-between;
      .goodsName {
        color: #081020;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

ul {
  box-sizing: border-box;

  & li:last-child {
    border-bottom: none;
  }

  li {
    // border-bottom: 1px solid #f2f3f4;

    padding: 15px;
    box-sizing: border-box;

    .cont-left {
      width: 100px;
      height: 100px;
      background-color: #f7f7f8;
      float: left;
      margin-right: 15px;
      .product-image {
        width: 100px;
        height: 100px;
      }
    }
  }
}

.order_beizhu {
  margin-left: 15px;
  margin-right: 15px;
  box-sizing: border-box;
  background-color: #f7f7f8;
}

.orderForm-num {
  height: 60px;
  line-height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;

  .order_btns {
    font-size: 13px;
    font-weight: 400;
    color: rgba(107, 107, 107, 1);
  }
}

.order_info {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  border-radius: 2px;
  margin: 15px;
  padding-bottom: 30rpx;

  .order_num {
    font-weight: 400;
    color: rgba(107, 107, 107, 1);
    font-size: 13px;
    padding: 15px 15px 0;

    .number {
      padding: 2px 6px;
      font-size: 11px;
      font-weight: 400;
      color: rgba(107, 107, 107, 1);
      border-radius: 2px;
      border: 1px solid rgba(144, 146, 146, 1);
      margin-left: 10px;
    }
  }
}

// 底部
.footer {
  width: 100%;
  height: 54px;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: flex-end;

  .footer_right {
    width: 80px;
    height: 30px;
    background: #fff;
    border-radius: 2px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: rgba(24, 119, 152, 1);
    margin-left: 10px;
    border: 1px solid rgba(24, 119, 152, 1);
  }
  .footer_left {
    width: 80px;
    height: 30px;
    border-radius: 4px 4px 12px 0px;
    border: 1px solid rgba(35, 24, 21, 1);
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(35, 24, 21, 1);
  }
}

#addAddress {
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 700;
  color: rgba(4, 10, 21, 1);
}
</style>
